<template>
  <div>
    <div class="page">
      <!-- <div>
        <a-button>返回</a-button>
      </div>-->
      <div class="pageBody">
        <div style="margin:0px 0px 20px 0px">
          <a-button type="primary" icon="plus" @click="onAdd">新建</a-button>
        </div>

        <!-- 表格 -->
        <div class="atable" style="margin-bottom:20px">
          <a-table :columns="columns" :data-source="data" :pagination="false">
            <span slot="progressStatus" slot-scope="progressStatus">
              <a-badge color="blue" v-if="progressStatus=='1'" text="启用" status="processing" />
              <a-badge color="#ccc" v-if="progressStatus=='0'" text="停用" />
            </span>

            <span slot="action" slot-scope="text, record">
              <a style="color:#1890FF;margin-right:20px" @click="onDetail(text, record)" v-if="text.progressStatus=='1'">停用</a>
              <a style="color:#1890FF;margin-right:20px" @click="onDetail(text, record)" v-if="text.progressStatus=='0'">启用</a>
              <a style="color:#1890FF;" @click="onSet(text, record)">配置管理</a>
            </span>
          </a-table>
        </div>
        <!-- 分页 -->
        <div class="pagination flexBetween">
          <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
          <div>
            <a-pagination
              :current="current"
              :page-size-options="pageSizeOptions"
              :total="this.configFun.pageNum(total)"
              show-size-changer
              :page-size="pageSize"
              @showSizeChange="onShowSizeChange"
              @change="pageChange"
              show-quick-jumper
            >
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.value }}条/页</span>
                <!-- <span v-if="props.value === '40'">全部</span> -->
              </template>
            </a-pagination>
          </div>
        </div>
      </div>

       <!-- 对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible"
        :title="modelTitle"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        class="aModal"
        :centered="true"
      >
        <a-form-model ref="ruleForm" :model="form" v-if="visible" :rules="rules">
          <a-form-model-item ref="name" label="空间名称" prop="name">
            <a-input v-model="form.name" :maxLength="30" placeholder="请输入空间名称" />
          </a-form-model-item>
        
        </a-form-model>
      </a-modal>
    </div>

    </div>
  </div>
</template>

<script>
const columns = [
  { title: '空间名称', dataIndex: 'recordDate', key: 'recordDate' },
  { title: '空间使用', dataIndex: 'fullName', key: 'fullName', scopedSlots: { customRender: 'fullName' } },
  { title: '使用单位', dataIndex: 'postName', key: 'postName', align: 'center' },
  {
    title: '状态',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    scopedSlots: { customRender: 'progressStatus' },
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
const tabdata = [
  {
    key: '1',
    recordDate: '项目课堂',
    fullName: '31.2G/800G',
    postName: '8',
    progressStatus: '1'
  },
  {
    key: '2',
    recordDate: 'A1标',
    fullName: '31.2G/800G',
    postName: '8',
    progressStatus: '0'
  }
]
export default {
  data() {
    return {
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      modelTitle:'新建空间',
      visible:false,
      form:{
          name:''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入空间名称',
            trigger: 'change'
          }
        ]}
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
      // this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      //   this.getTotal(pageSize, this.current)
    },
    onDetail() {},
    handleOk(){
        this.$refs.ruleForm.validate((valid) => {
        if (valid) {
         this.visible=false
        } else {
          return false
        }
      })
    },
    onAdd(){
        this.visible=true
        this.form.name=''
    },
    //配置管理
    onSet(){
        this.$router.push({path:'/projectService/spaceAllocation'})
    }
  }
}
</script>

<style scoped>
.pageBody {
  background: #fff;
  margin: 20px;
  padding: 35px 20px 20px;
}
</style>